<template>
  <div>
    <el-card>
      <p>供应商对账表</p>
      <div class="searchArea">
        <el-form :inline="true"
                 label-position="left">
          <el-form-item label="制造商">
            <el-select v-model="searchForm.mValue" filterable clearable
                       placeholder="请选择">
              <el-option v-for="item in searchForm.AllSlist"
                         :key='item.id'
                         :label="item.menuName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造商料号：">
            <el-input v-model="searchForm.productCode"
                      placeholder="请输入制造商料号" clearable
                      ></el-input>
          </el-form-item>
          <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-button type='primary'
              @click="getList()">搜索</el-button>
          <el-button type='primary' style="margin-left:15px"
              @click="dialogFormVisible=true">导出</el-button>
          <!--<el-form-item>
            <el-button
              type='primary'
              style="margin-left:30px"
              @click="dialogVisible=true"
            >填写申请</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe
                  @selection-change="handleSelectionChange">
          <el-table-column prop="orderNum"
                           label="补料单编号"
                           align="center"></el-table-column>
          <el-table-column prop="dealTime"
                           label="创建时间"
                           align="center"></el-table-column>        
          <el-table-column prop="productManuNum"
                           label="制造商料号"
                           align="center"></el-table-column>
          <el-table-column prop="stock"
                           label="补料数量(个)"
                           align="center"></el-table-column>                           
          <el-table-column prop="inStoreNum"
                           label="入库数量(个)"
                           align="center"></el-table-column>
          <el-table-column prop="price"
                           label="补料单价(￥)"
                           align="center"></el-table-column>
          <el-table-column prop="tax"
                           label="税金13%(￥)"
                           align="center"></el-table-column>
          <el-table-column prop="totalPrice"
                           label="总额(￥)"
                           align="center"></el-table-column>
          <el-table-column prop="meunName"
                           label="制造商"
                           align="center"></el-table-column>
          <!-- <el-table-column prop="status"
                           width="100"
                           label="审批状态"
                           align="center">
            <template slot-scope="scope">
              <el-tag 
                      v-show="scope.row.status==0">待审批</el-tag>
              <el-tag type="success"
                      v-show="scope.row.status==1">已审批</el-tag>
              <el-tag type="danger"
                      v-show="scope.row.status==2">已婉拒</el-tag>
            </template>
          </el-table-column> -->

        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
    <el-dialog title="导出补料单" :visible.sync="dialogFormVisible">
      <el-form :model="downLoadForm">
        <el-form-item prop="items" label="制造商">
                <el-select v-model="downLoadForm.menuNmae" placeholder="请选择">
                  <el-option
                    v-for="item in downLoadForm.AllSlist"
                    :label="item.menuName"
                    :value="item.menuName"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
        <!-- <el-form-item label="是否处理"
                      prop="mobile">
            <el-switch
            v-model="downLoadForm.isHandle"
            active-text="已审批"
            inactive-text="未审批">
            </el-switch>
        </el-form-item> -->
          <el-form-item label="创建时间"
                        prop="timeRange">
            <el-date-picker v-model="downLoadForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  PRODUCT_MAKEUP_MY_LIST,PRODUCT_MAKEUP_LIST,ORDER_DOWNLOAD,
   PRODUCT_MAKEUP_APPLY, SUPPLIER_ALLLIST, PRODUCT_MAKEUP_LISTBYMENU
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      downLoadForm:{
        menuNmae:'',
        isHandle:false,
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
         AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ]
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      searchForm: {
        AllSlist: [],
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        mValue: null
      },
      supplementForm: {
        aksNum: "AKS13jj3124",
        productManuNum: "2335451",
        meunId: "BMW",
        meunName: "",
        memo: "sfds423g23g",
        productAddress: "",
        unit: "xxx",
        stock: "100",
        price: "10",
        dealTime: "2019/11/30",
      },
      tableData: [

      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      dialogVisible: false,
      value: null
    };
  },
  created () {
    this.getAllList()
    this.getList()
  },
  methods: {
   
    downLoadData(){
      ORDER_DOWNLOAD({
        menuNmae:this.downLoadForm.menuNmae,
        startTime:Math.floor(new Date(this.downLoadForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.downLoadForm.timeRange[1]).getTime()/1000),
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
    getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.searchForm.AllSlist = res.data
        this.downLoadForm.AllSlist =res.data
      })
    },
    getList () {
      PRODUCT_MAKEUP_LIST({
        productCode:this.searchForm.productCode,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
        menuId: this.searchForm.mValue,
        pageFlag:1
      }).then(res => {
        this.tableData = res.data.dataList
        this.total = res.data.count
        for (let i in this.tableData) {
          this.tableData[i].dealTime = this.formatSecond(this.tableData[i].dealTime)
          this.tableData[i].totalPrice=this.tableData[i].stock * this.tableData[i].price
        }
      })
    },
    applyProduct () {
      PRODUCT_MAKEUP_APPLY({
        orderNum: "12312",
        aksNum: "AKS13jj3124",
        productManuNum: "2335451",
        meunId: "BMW",
        memo: "sfds423g23g",
        productAddress: "",
        unit: "xxx",
        stock: "100",
        price: "10",
        dealTime: "2019/11/30"
      }).then(res => {
        this.getMakeUpList()
      })

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      if (this.value == '') {
        this.getMakeUpList()
      } else {
        this.getList(this.value)
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      if (this.value == '') {
        this.getMakeUpList()
      } else {
        this.getList(this.value)
      }
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>